<template>
    <div>
        <ul class="order-list-ul clearfix" v-for="(item,index) in list" :key="index">
            <li class="order-list-li-data">
                {{item.year}}年
            </li>
            <li class="order-list-li-box b-g-f clearfix" v-for="(itemE,indexE) in item.data" :key="indexE">
                <span class="order-list-month">
                    <img class="order-dian month-dian" src="../../../static/img/tuoyuan.png" alt="">    {{itemE.months}}月
                </span>
                <span>订单数：{{itemE.order_num}}</span>
                <span>金额：{{itemE.total_amount}}</span>
            </li>
        </ul>
        <span class="more-list" @click="more()">点击加载更多</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[],
            page:1
        }
    },
    mounted(){
        this.dietitianOrderForAgent()
    },
    methods:{
        dietitianOrderForAgent(){
            this.$api.dealers.dietitianOrderForAgent({page:this.page,dietitian_id:this.$route.query.id}).then(resp=>{
                if(resp.code == 1){
                    this.list.push(resp.data)
                }
            })
        },
        more(){
            this.page++
            this.dietitianOrderForAgent()
        }
    }
}
</script>

<style lang="less" scoped>
.order-list-ul{
    margin: 20px 40px;
    .order-list-li-data{
        text-align: center;
        color: #999;
        margin-top: 30px;
    }
    .order-list-li-box{
        margin-top: 30px;
        border-radius: 15px;
        span{
            width: 33.33%;
            height: 120px;
            line-height: 120px;
            display: block;
            float: left;
            font-size: 38px;
            color: #666;
        }
        .order-list-month{
            font-size: 44px;
            color: #333;
            .month-dian{
                margin-left: 20px;
                margin-right: 20px;
                float: left;
                margin-top: 50px;
                height: 17px;
            }
        }
    }
}
.more-list{
    padding-top: 50px;
    font-size: 30px;
    height: 60px;
    line-height: 60px;
    display: block;
    text-align: center;
    color: #999;
}
</style>

